<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>秒杀活动列表</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
    <countDate :remain-time="remainTime" />
</head>

<body>
    <div id='app'>
        <h1>秒杀活动列表</h1>
        <h3>欢迎用户 <span style="color: red;">{{loginName}}</span> 登录！</h3>
        <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
            <el-form-item>
                <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getDataList()">查询</el-button>
                <!-- <el-button type="primary" @click="addOrUpdateHandle()">新增
                </el-button> -->
                <el-button type="primary" @click="detail2()">拼团活动页面
                </el-button>
                
                <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle"
            style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50">
            </el-table-column>
            <el-table-column prop="aid" header-align="center" align="center" label="活动id">
            </el-table-column>
            <el-table-column prop="goodsName" header-align="center" align="center" label="商品名称">
            </el-table-column>
            <el-table-column prop="goodsImg" header-align="center" align="center" label="商品图片">
                <template slot-scope="scope">
                    <img :src="scope.row.goodsImg" width="100px" height="100px" alt="">
                </template>
            </el-table-column>
            </el-table-column>
            <el-table-column prop="goodsPrice" header-align="center" align="center" label="原价(元)">
            </el-table-column>
            <el-table-column prop="miaoshaPrice" header-align="center" align="center" label="秒杀价(元)">
            </el-table-column>
            <el-table-column prop="stockCount" header-align="center" align="center" label="秒杀库存(件)">
            </el-table-column>

            <el-table-column prop="startDate" header-align="center" align="center" label="秒杀开始时间">
            </el-table-column>
            <el-table-column prop="endDate" header-align="center" align="center" label="秒杀结束时间">
            </el-table-column>
            <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="detail(scope.row.aid)">秒杀活动详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[3, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
        <el-dialog :title="!xqdataForm.aid ? '秒杀活动' : '活动详情'" :close-on-click-modal="false" :visible.sync="visible">
            <el-form :model="xqdataForm" ref="xqdataForm" @keyup.enter.native="xqdataFormSubmit()" label-width="140px">
                <el-form-item label="商品编号" prop="aid" hidden>
                    <el-input v-model="xqdataForm.aid" placeholder="商品编号"></el-input>
                </el-form-item>
                <el-form-item label="商品名称" prop="goodsName">
                    <el-input v-model="xqdataForm.goodsName" placeholder="商品名称" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品原价(元)" prop="goodsPrice">
                    <el-input v-model="xqdataForm.goodsPrice" placeholder="商品原价" disabled></el-input>
                </el-form-item>
                <el-form-item label="秒杀价(元)" prop="miaoshaPrice">
                    <el-input v-model="xqdataForm.miaoshaPrice" placeholder="秒杀价" disabled></el-input>
                </el-form-item>
                <el-form-item label="商品图片" prop="goodsImg">
                    <el-input v-model="xqdataForm.goodsImg" placeholder="商品图片"> </el-input>
                    <template slot-scope="scope">
                        <img :src="xqdataForm.goodsImg" width="100px" height="100px" alt="">
                    </template>
                </el-form-item>
                <el-form-item label="库存数量(件)" prop="stockCount">
                    <el-input v-model="xqdataForm.stockCount" placeholder="库存数量" disabled></el-input>
                </el-form-item>
                <el-form-item label="秒杀开始时间" prop="startDate">
                    <el-input v-model="xqdataForm.startDate" placeholder="秒杀开始时间" disabled></el-input>
                </el-form-item>
                <el-form-item label="秒杀结束时间" prop="endDate">
                    <el-input v-model="xqdataForm.endDate" placeholder="秒杀结束时间" disabled></el-input>
                </el-form-item>
                <!-- 倒计时判断 -->
                <span v-if="xqdataForm.flag==1">
                    <el-form-item label="据活动结束还有：">
                        <template>
                            <span class="count-content">
                                <span>{{ dayString }}</span>天<span>{{ hourString }}</span>小时<span>{{ minuteString
                                    }}</span>分钟<span>{{ secondString }}</span>秒
                            </span>
                        </template>
                    </el-form-item>
                </span>
                <span v-if="xqdataForm.flag==2">
                    <el-form-item label="据活动开始还有：">
                        <template>
                            <span class="count-content">
                                <span>{{ dayString }}</span>天<span>{{ hourString }}</span>小时<span>{{ minuteString
                                    }}</span>分钟<span>{{ secondString }}</span>秒
                            </span>
                        </template>
                    </el-form-item>
                </span>
                <span v-if="xqdataForm.flag==3">
                    <el-form-item label="活动已结束">
                    </el-form-item>
                </span>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false">退出</el-button>
                <span v-if="xqdataForm.flag==1">
                    <el-button type="primary" @click="msSubmit()">秒杀</el-button>
                </span>
                <span v-if="xqdataForm.flag==2">
                    <el-button type="primary" disabled>活动未开始</el-button>
                </span>
                <span v-if="xqdataForm.flag==3">
                    <el-button type="primary" disabled>活动已结束</el-button>
                </span>
            </span>
        </el-dialog>
   
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    token:localStorage.getItem("token"),
                    pathId: '',
                    loginName: localStorage.getItem("loginName"),
                    loginId: localStorage.getItem("loginId"),
                    dataUrl: "http://localhost:88/api",
                    dataForm: {
                    },
                    xqdataForm: {
                        aid: 0,
                        goodsId: '',
                        goodsName: '',
                        goodsImg: '',
                        goodsPrice: '',
                        miaoshaPrice: '',
                        stockCount: '',
                        startDate: '',
                        endDate: '',
                        flag: 0//默认0
                    },
                    visible: false,
                    dataList: [],
                    pageIndex: 1,
                    pageSize: 3,
                    totalPage: 0,
                    dataListLoading: false,
                    dataListSelections: [],
                    addOrUpdateVisible: false,
                    day: '',
                    hour: '',
                    minute: '',
                    second: '',
                    promiseTimer: ''
                }
            }, props: {
                remainTime: {
                    // 倒计时间总秒数
                    type: Number,
                    default: 0
                }
            },
            //方法集合
            methods: {
                init(id) {
                    this.xqdataForm.aid = id || 0
                    this.visible = true
                    this.$nextTick(() => {
                        this.$refs['xqdataForm'].resetFields()
                        if (this.xqdataForm.aid) {
                            axios({
                                url: `${this.dataUrl}/user/activity/info/${id}`,
                                method: 'get',
                            }).then(({ data }) => {
                                console.log(data)
                                if (data && data.code === 0) {
                                    //console.log(data.activity.aid)
                                    this.xqdataForm.aid = data.activity.aid
                                    this.xqdataForm.goodsId = data.activity.goodsId
                                    this.xqdataForm.miaoshaPrice = data.activity.miaoshaPrice
                                    this.xqdataForm.stockCount = data.activity.stockCount
                                    this.xqdataForm.startDate = data.activity.startDate//开始时间
                                    this.xqdataForm.endDate = data.activity.endDate//结束时间
                                    this.xqdataForm.goodsName = data.goods.goodsName
                                    this.xqdataForm.goodsPrice = data.goods.goodsPrice
                                    this.xqdataForm.goodsImg = data.goods.goodsImg
                                    //倒计时
                                    const st1 = new Date().getTime()//当前时间毫秒值
                                    const st2 = new Date(this.xqdataForm.endDate).getTime()//结束时间毫秒值
                                    const st3 = new Date(this.xqdataForm.startDate).getTime()//开始时间毫秒值
                                    if (st1 - st3 > 0 & st1 - st2 < 0) {
                                        //活动开始并且未结束
                                        const desc = st2 - st1//距离结束 毫秒值
                                        this.remainTime = desc / 1000
                                        console.log('活动未结束', desc / 1000)
                                        this.xqdataForm.flag = 1
                                    }
                                    else if (st1 - st3 < 0) {
                                        //活动未开始
                                        const desc = st3 - st1//距离开始 毫秒值
                                        this.remainTime = desc / 1000
                                        console.log('活动未开始', desc / 1000)
                                        this.xqdataForm.flag = 2
                                    } else {
                                        const desc = 0//距离开始 毫秒值
                                        this.remainTime = desc / 1000
                                        console.log('活动已结束', desc / 1000)
                                        this.xqdataForm.flag = 3
                                    }
                                    //当前时间
                                    if (this.remainTime > 0) {
                                        this.day = Math.floor((this.remainTime / 3600) / 24)
                                        this.hour = Math.floor((this.remainTime / 3600) % 24)
                                        this.minute = Math.floor((this.remainTime / 60) % 60)
                                        this.second = Math.floor(this.remainTime % 60)
                                        this.countDowm()
                                    }
                                }
                            })
                        }
                    });
                },
                // 获取数据列表
                getDataList() {
                    this.dataListLoading = true
                    axios({
                        url: `${this.dataUrl}/user/activity/mslist`,
                        method: 'get',
                        params: ({
                            'page': this.pageIndex,
                            'limit': this.pageSize,
                            'key': this.dataForm.key
                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            console.log(data)
                            this.dataList = data.page
                            this.totalPage = data.page.totalCount
                        } else {
                            this.dataList = []
                            this.totalPage = 0
                        }
                        this.dataListLoading = false
                    })
                },
                // 每页数
                sizeChangeHandle(val) {
                    this.pageSize = val
                    this.pageIndex = 1
                    this.getDataList()
                },
                // 当前页
                currentChangeHandle(val) {
                    this.pageIndex = val
                    this.getDataList()
                },
                // 多选
                selectionChangeHandle(val) {
                    this.dataListSelections = val
                },

                detail(id) {
                    console.log(id)
                    this.init(id);

                },
                detail2(id){
                 location="bargain_list.html"
                },
                countDowm() {
                    var self = this
                    clearInterval(this.promiseTimer)
                    this.promiseTimer = setInterval(function () {
                        if (self.day === 0) {
                            if (self.hour === 0) {
                                if (self.minute !== 0 && self.second === 0) {
                                    self.second = 59
                                    self.minute -= 1
                                } else if (self.minute === 0 && self.second === 0) {
                                    self.second = 0
                                    self.$emit('countDowmEnd', true)
                                    clearInterval(self.promiseTimer)
                                } else {
                                    self.second -= 1
                                }
                            } else {
                                if (self.minute !== 0 && self.second === 0) {
                                    self.second = 59
                                    self.minute -= 1
                                } else if (self.minute === 0 && self.second === 0) {
                                    self.hour -= 1
                                    self.minute = 59
                                    self.second = 59
                                } else {
                                    self.second -= 1
                                }
                            }
                        } else {
                            if (self.hour === 0 && self.minute === 0 && self.second === 0) {
                                self.day -= 1
                                self.hour = 23
                                self.minute = 60
                                self.second = 60
                            } else {
                                if (self.hour === 0) {
                                    if (self.minute !== 0 && self.second === 0) {
                                        self.second = 59
                                        self.minute -= 1
                                    } else if (self.minute === 0 && self.second === 0) {
                                        self.second = 0
                                    } else {
                                        self.second -= 1
                                    }
                                } else {
                                    if (self.minute !== 0 && self.second === 0) {
                                        self.second = 59
                                        self.minute -= 1
                                    } else if (self.minute === 0 && self.second === 0) {
                                        self.hour -= 1
                                        self.minute = 59
                                        self.second = 59
                                    } else {
                                        self.second -= 1
                                    }
                                }
                            }
                        }
                    }, 1000)
                },
                formatNum(num) {
                    return num < 10 ? '0' + num : '' + num
                },
                //秒杀 生成秒杀订单 
                msSubmit() {
                    localStorage.setItem("aid", this.xqdataForm.aid)
                    //点击秒杀之后 就访问后端 获取一个秒杀地址pathId
                    axios({
                        url: `${this.dataUrl}/orders/order/getPath?goodsId=${this.xqdataForm.goodsId}&userId=${this.loginId}`,
                        method: 'get',
                        data: {}
                        // params: ({
                        //     'goodsId': this.xqdataForm.goodsId,
                        //     'userId':this.xqdataForm.loginId
                        // })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            console.log(data.pathId)
                            this.pathId = data.pathId;
                            this.msAdd()
                        }

                    });


                },
                msAdd() {

                    //生成秒杀订单
                    axios({
                        url: `${this.dataUrl}/orders/order/${this.pathId}/msAdd`,
                        method: 'post',
                        params: ({
                            'userId': this.loginId,
                            'goodsId': this.xqdataForm.goodsId,
                            'activityId': this.xqdataForm.aid,

                        })
                    }).then(({ data }) => {
                        if (data && data.code === 0) {
                            this.$message({
                                message: '订单生成成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false
                                    console.log(data)
                                    localStorage.setItem("userId", data.userId)
                                    localStorage.setItem("activityId", data.activityId)
                                    location = "oders_add.html"
                                }
                            })
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }

            },
            created() {
                console.log(this.token)
                this.getDataList();

            },
            computed: {
                hourString() {
                    return this.formatNum(this.hour)
                },
                minuteString() {
                    return this.formatNum(this.minute)
                },
                secondString() {
                    return this.formatNum(this.second)
                },
                dayString() {
                    return this.formatNum(this.day)
                }
            },
            mounted() {
                //通常是为 metheds  函数提前定义（ 类似提前声明变量 进入页面内容全部渲染完成后自动引函数）
            }
        })

    </script>

</body>

</html>